<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../vue.js" charset="utf-8"></script>
      </head>
      <body>
        <div id="app">
            <p>
              <custom-input v-model="rawvalue" @on-change='inputChange'></custom-input>
            </p>

            <p>
              <input type="button" value="reset value"  @click="btnClick"/>
            </p>
          </div>
      </body>
      <script type="text/javascript">
Vue.component('custom-input',{
    template: '<input type="text" v-model="inputValue" >',
    props: {
     value:String
    },
    data:function(){
          return {
          inputValue:this.value
      }
    },
    watch:{
    	value:function(val){
      	this.inputValue=val;
      },
      inputValue:function(val){
      	this.$emit('input',val);
        this.$emit('on-change',val);
      }
    }
  });

var vm = new Vue({
    el: '#app',
    data: {
      rawvalue: '',
    },
    methods:{
    	inputChange:function(){
      	this.rawvalue='123456';
      },
      btnClick:function(){
      	this.rawvalue='abcdef';
      }
    }
});
      </script>
</html>